<template>
  <el-dialog
    :model-value="visible"
    :title="dialogTitle"
    width="600px"
    @close="handleClose"
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="120px"
    >
      <el-form-item label="优惠券名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入优惠券名称" />
      </el-form-item>
      
      <el-form-item label="优惠券类型" prop="type">
        <el-select v-model="form.type" placeholder="请选择优惠券类型" style="width: 100%">
          <el-option label="满减券" value="1" />
          <el-option label="折扣券" value="2" />
        </el-select>
      </el-form-item>
      
      <el-form-item label="面额" prop="amount">
        <el-input v-model.number="form.amount" placeholder="请输入面额">
          <template #append>元</template>
        </el-input>
      </el-form-item>
      
      <el-form-item label="使用条件" prop="condition">
        <el-input v-model.number="form.condition" placeholder="满多少元可用">
          <template #prepend>满</template>
          <template #append>元可用</template>
        </el-input>
      </el-form-item>
      
      <el-form-item label="发放数量" prop="quantity">
        <el-input v-model.number="form.quantity" placeholder="请输入发放数量">
          <template #append>张</template>
        </el-input>
      </el-form-item>
      
      <el-form-item label="每人限领" prop="limit">
        <el-input v-model.number="form.limit" placeholder="每人限领数量">
          <template #append>张</template>
        </el-input>
      </el-form-item>
      
      <el-form-item label="有效期" prop="validity">
        <el-date-picker
          v-model="form.validity"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 100%"
        />
      </el-form-item>
      
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio :label="0">待审核</el-radio>
          <el-radio :label="1">审核中</el-radio>
          <el-radio :label="2">审核通过</el-radio>
          <el-radio :label="3">审核拒绝</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, computed, defineEmits, defineProps, watch } from 'vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  data: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['update:modelValue', 'success'])

const visible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})

const dialogTitle = computed(() => props.data.id ? '编辑优惠券' : '新增优惠券')

const formRef = ref()

const form = reactive({
  id: undefined,
  name: '',
  type: '',
  amount: undefined,
  condition: undefined,
  quantity: undefined,
  limit: undefined,
  validity: [],
  status: 0
})

const rules = {
  name: [{ required: true, message: '请输入优惠券名称', trigger: 'blur' }],
  type: [{ required: true, message: '请选择优惠券类型', trigger: 'change' }],
  amount: [{ required: true, message: '请输入面额', trigger: 'blur' }],
  condition: [{ required: true, message: '请输入使用条件', trigger: 'blur' }],
  quantity: [{ required: true, message: '请输入发放数量', trigger: 'blur' }],
  limit: [{ required: true, message: '请输入每人限领数量', trigger: 'blur' }]
}

// 监听data变化，更新表单
watch(() => props.data, (newVal) => {
  if (newVal && Object.keys(newVal).length > 0) {
    Object.assign(form, newVal)
  } else {
    // 重置表单
    Object.keys(form).forEach(key => {
      if (key === 'status') {
        form[key] = 0
      } else if (Array.isArray(form[key])) {
        form[key] = []
      } else {
        form[key] = undefined
      }
    })
  }
}, { immediate: true })

const handleClose = () => {
  visible.value = false
  formRef.value?.resetFields()
}

const handleSubmit = async () => {
  if (!formRef.value) return
  
  await formRef.value.validate((valid) => {
    if (valid) {
      // 模拟保存操作
      ElMessage.success(props.data.id ? '编辑成功' : '新增成功')
      emit('success')
      handleClose()
    }
  })
}

// 暴露方法给父组件
defineExpose({
  handleClose
})
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>